<template>
    <div class="child">
        <h1>这是child组件</h1>
        <div>父组件传递过来的数据--{{msg}}</div>
        <button @click="send">传值给父组件</button>
       
    </div>  
</template>

<script>
    import { defineComponent,ref,onMounted} from 'vue' 
    export default defineComponent({
        name:'Child',
        // 接收父组件传递过来点参数
        props:{
            msg:{
                // 数据类型校验
                type:String,
                // 是否必传,默认是false
                required:false,
                default:'默认值'
            }
        },
        setup(props,ctx){
            console.log(props.msg);
            let childMsg = ref('我是子组件的数据(btn)')
             let childMsgBtn = ref('我是子组件的数据')
            let send = ()=>{
                //而是通过ctx.emit分发事件
                // emit第一个参数是事件名称,第二个参数是传递点数据
                ctx.emit('send',childMsg.value)
            }
            onMounted(()=>{
                 ctx.emit('send',childMsgBtn.value)
             })
            return {
               childMsg,
               childMsgBtn,
               send
            }
        }
    })
</script>

<style lang="scss" scoped>
    .child{
        background-color:beige;
        padding: 10px;
    }
</style>